import { PenChildProps } from "@/types";
import { Collapse, Input, Space } from "antd";
import React from "react";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { DataAddTag } from "@/components/Configuration/PenProps/components/DataAddTag.tsx";
import { DataPen } from "@/components/Configuration/PenProps/components/DataPen.tsx";

export function PenDataTag(props: PenChildProps) {
  const panelStyle: React.CSSProperties = {
    borderRadius: 0,
  };
  return (
    <>
      <Space
        style={{ padding: "10px" }}
        className={"w-full"}
        direction="vertical"
      >
        <FormRowCol label="ID">
          <Input disabled value={props.penOptions.id} bordered={false}></Input>
        </FormRowCol>
        <FormRowCol label="名称">
          <Input
            value={props.penOptions.description}
            onChange={(e) => {
              props.setPenValue("description", e.target.value);
            }}
          ></Input>
        </FormRowCol>
      </Space>

      <Collapse
        style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
        items={[
          {
            key: "tag",
            label: "Tag标签",
            children: <DataAddTag {...props} />,
            style: panelStyle,
          },
        ]}
        defaultActiveKey={["tag"]}
      />
      <Collapse
        style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
        items={[
          {
            key: "data",
            label: "数据",
            children: <DataPen {...props} />,
            style: panelStyle,
          },
        ]}
        defaultActiveKey={["data"]}
      />
    </>
  );
}
